<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>众筹管理后台</title>
<%
	pageContext.setAttribute("APP_PATH", request.getContextPath());
%>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/dashboard.css" />
<link rel="stylesheet" href="css/comments.css" />
</head>
<body>
<!-- 删除 -->
<div class="modal fade bs-example-modal-sm" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
    	<div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h5 class="modal-title" id="myModalLabel">删除评论</h5>
      </div>
      <div class="col-sm-10">
		<p id="delete_message">确定删除这条评论吗？</p>
		<span class="help-block"></span>
	  </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" id="deleteOk">确定</button>
      </div>
    </div>
  </div>
</div>	
		
		 <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">众筹管理平台</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
        	
          <ul class="nav navbar-nav navbar-right">
          	<li><a href="index.jsp">首页</a></li>
          	<li><a href="admin_userinfo.jsp">欢迎, 张三</a></li>
            <li><a href="update_userinfo.jsp" title="修改个人资料和密码的页面">设置</a></li>
            <li><a href="#" title="退出登录">退出</a></li>
          </ul>
        </div>
      </div>
    </nav>

    <div class="container-fluid">
      <div class="row">
        <div class="col-sm-3 col-md-2 sidebar">
        	<ul class="nav nav-sidebar">
            <li ><a href="index.jsp">首页</a></li>
           </ul>
          <ul class="nav nav-sidebar">
            <li><a href="products.jsp">所有项目</a></li>
            <li><a href="auditing.jsp">项目审核</a></li>
            <li><a href="following.jsp">项目跟踪</a></li>
 		    <li class="active"><a href="comments.jsp">项目评论</a></li>
            <li><a href="classify.jsp">项目分类</a></li>
            <li><a href="recommend.jsp">项目推荐</a></li>
          </ul>
          <ul class="nav nav-sidebar">
            <li><a href="user_register.jsp">注册用户</a></li>
            <li><a href="user_bankroll.jsp">用户资金</a></li>
            <li><a href="user_log.jsp">用户日志</a></li>
            <li><a href="user_audit.jsp">实名审核</a></li>
          </ul>
          <ul class="nav nav-sidebar">
            <li><a href="news_management.jsp">新闻管理</a></li>
            <li><a href="problem_management.jsp">问题管理</a></li>
            <li><a href="user_management.jsp">管理用户</a></li>
            <li><a href="log_management.jsp">管理日志</a></li>
          </ul>
        </div>
        
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
          <h1 class="page-header">所有项目评论</h1>
          <div class="search2">
                <input type="text" class="search2-txt" placeholder="搜索">
                <button type="button" class="search2-but" id="search2-but" ></button>
        </div>
<div class="panel panel-default">
  <div class="panel-heading">
    <div class="panel-title">
    	所有项目列表
    </div>
  </div>
  <div class="panel-body">
   
          <div class="table-responsive ">
            <table class="table table-striped table-bordered" id="comments_table">
              <thead>
                <tr>
                  <th>评论ID</th>
                  <th>项目名称</th>
                  <th>评论用户</th>
                  <th>评论内容</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody>
           
              </tbody>
            </table>
            <span id="error-message"></span>
          </div>

  	<!-- 显示分页数据 -->
	<div class="row">
	<!-- 分页文字信息 -->
		<div class="col-md-6" id="page_info_area">
		
		</div>
	<!-- 分页条信息 -->
		<div class="col-md-6" id="page_nav_area">
		
		</div>
	</div>	
  </div>
</div>
      
        </div>
      </div>
    </div>
		
<script type="text/javascript" src="js/jquery1.12.4.min.js" ></script>
<script type="text/javascript" src="js/bootstrap.min.js" ></script>
<script type="text/javascript" src="js/countUp.js" ></script>
<script  type="text/javascript"> 
	$(function(){
		$(".search2-txt").val("");
		$.ajax({
			url:"${APP_PATH}/getAllComments",
			data:"pn=1",
			type:"GET",
			success:function(result){
				if(result.code==100){
   					//1. 解析并显示员工数据
  	   				//console.log(result);
  	   				build_comments_table(result);
  	   				//2.
  	   				build_page_info(result);
  	   				//3. 解析并显示分页数据
  	   				build_page_nav(result,1)
   			  	}else{
   				  $("#error-message").text("还没有评论哦~~");
   			  	}
			}
		});
	});

	function to_page(pn){
  	   $.ajax({
   		  url:"${APP_PATH}/getAllComments",
   		  data:"pn="+pn,
   		  type:"GET",
   		  success:function(result){
   			  if(result.code==100){
   				//1. 解析并显示员工数据
  	   			//console.log(result);
  	   			build_comments_table(result);
  	   			//2.
  	   			build_page_info(result);
  	   			//3. 解析并显示分页数据
  	   			build_page_nav(result,1)
   			  }else{
   				  $("#error-message").text("还没有评论哦~~");
   			  }
   			
   		  }
   	  });
 	}

	function build_comments_table(result){
		//清空表格
		$("#comments_table tbody").empty();
		var comments=result.extend.pageInfo.list;
		$.each(comments,function(index,item){
			//alert(item.empName);
			var cmIdTd=$("<td></td>").append(item.cmId);
			var psNameTd=$("<td></td>").append(item.projects.psName);
			var usNameTd=$("<td></td>").append(item.user.usName);
			var cmContentTd=$("<td></td>").append(item.cmContent);
			var delBtn=$("<button data-toggle='modal' data-target='#deleteModal' ></button>").addClass("btn btn-danger btn-sm delete_btn")
				.append($("<span></span>").addClass("glyphicon glyphicon-trash"))
				.append("删除");
			delBtn.attr("delete_id",item.cmId);
			var btnTd=$("<td></td>").append(delBtn);
			$("<tr></tr>").append(cmIdTd)
					  	.append(psNameTd)
					  	.append(usNameTd)
					  	.append(cmContentTd)
					  	.append(btnTd)
					  	.appendTo("#comments_table tbody");
		});
	}

 
	//解析显示分页信息
	function build_page_info(result){
		$("#page_info_area").empty();
		$("#page_info_area")
		.append("当前第"+result.extend.pageInfo.pageNum+
				"页,总共"+result.extend.pageInfo.pages+"页,总共"
				+result.extend.pageInfo.total+"条记录");
	}

	//解析显示分页条
	function build_page_nav(result,flag){
		$("#page_nav_area").empty();
	   	var ul=$("<ul></ul>").addClass("pagination");
	   
	   	var firstPageLi=$("<li></li>").append($("<a></a>").append("首页").attr("href","#"));
	   	var prePageLi=$("<li></li>").append($("<a></a>").append("&laquo;").attr("href","#"));
	   	if(result.extend.pageInfo.hasPreviousPage==false){
	   		firstPageLi.addClass("disabled");
		   	prePageLi.addClass("disabled");
	   	}else{    		   
	  		 prePageLi.click(function(){
	  			 if(flag == 1){
	  				to_page(result.extend.pageInfo.pageNum-1);
	  			 }else{
	  				to_page2(result.extend.pageInfo.pageNum-1); 
	  			 }
		   		
	  		 });
	   		firstPageLi.click(function(){
		   	if(flag == 1){
  				to_page(1);
  			 }else{
  				to_page2(1);
  			 }
	   		});
	   }
	   var nextPageLi=$("<li></li>").append($("<a></a>").append("&raquo;").attr("href","#"));
	   
	   var lastPageLi=$("<li></li>").append($("<a></a>").append("末页").attr("href","#"));
	   if(result.extend.pageInfo.hasNextPage==false){
		   nextPageLi.addClass("disabled");
		   lastPageLi.addClass("disabled");
	   }else{    		   
	   		nextPageLi.click(function(){
		   		if(flag == 1){
  				to_page(result.extend.pageInfo.pageNum+1);
  			 }else{
  				to_page2(result.extend.pageInfo.pageNum+1);
  			 }
	   		});
	   		lastPageLi.click(function(){
		   		if(flag == 1){
  				to_page(result.extend.pageInfo.pages);
  			 }else{
  				to_page2(result.extend.pageInfo.pages);
  			 }
	   		});
	   }
	   
	   ul.append(firstPageLi).append(prePageLi);
	   //result.extend.pageInfo.navigatepageNums 为什么是这样子，看返回的json数据类型就可以了
	   $.each(result.extend.pageInfo.navigatepageNums,function(index,item){
		   var numLi=$("<li></li>").append($("<a></a>").append(item).attr("href","#"));
		   if(result.extend.pageInfo.pageNum==item){
			   numLi.addClass("active");
		   }
		   numLi.click(function(){
			 	if(flag == 1){
  				to_page(item);
  			 }else{
  				to_page2(item);
  			 }
		   });
		   ul.append(numLi);
	   });
	   ul.append(nextPageLi).append(lastPageLi);
	   //把ul添加到nav
	   var navEle=$("<nav></nav>").append(ul);
	   navEle.appendTo("#page_nav_area");
	}
	
	//删除
	$(document).on("click",".delete_btn",function(){
		var cmId = $(this).attr("delete_id");
		var page = $("#page_nav_area .active").text();
		$("#deleteOk").attr("page",page);
		
		$("#deleteOk").attr("cmId",cmId);
	});
	
	//确定删除
	$(document).on("click","#deleteOk",function(){
		$.ajax({
			url:"${APP_PATH}/deleteComment",
			type:"POST",
			data:"cmId="+$("#deleteOk").attr("cmId"),
			success:function (result){
				 if(result.code==100){    //jsr303验证成功				 
	    			 	$("#deleteModal").modal('hide');
	    			 	alert("删除成功！");
	    			 	$(".search2-txt").val("");
	    			 	$.ajax({
	    			   		  url:"${APP_PATH}/getAllComments",
	    			   		  data:"pn="+$("#deleteOk").attr("page"),
	    			   		  type:"GET",
	    			   		  success:function(result){
	    			   			if(result.code==100){
	    			   				//1. 解析并显示员工数据
	    			  	   			//console.log(result);
	    			  	   			build_comments_table(result);
	    			  	   			//2.
	    			  	   			build_page_info(result);
	    			  	   			//3. 解析并显示分页数据
	    			  	   			build_page_nav(result,1)
	    			   			  }else{
	    			   				  $("#error-message").text("还没有评论哦~~");
	    			   			  }
	    			   		  }
	    			   	  });
	    			 }else{//删除失败
	    				 alert("删除失败！");
	    			 }
			}
		});
	});
	
	//点击开始查询
	$(document).on("click",".search2-but",function(){
		var condition = $(".search2-txt").val();
		alert(condition);
		$.ajax({
			url:"${APP_PATH}/searchCommentWithAll",
			type:"GET",
			data:"pn=1"+"&condition="+condition,
			success:function (result){
				 	if(result.code==100){    //jsr303验证成功				 
				 		build_comments_table(result);
				 		build_page_info(result);
						//2.解析并显示分页数据
						build_page_nav(result,2)
	    			 }else{//验证失败
	    				 $("#error-message").text("没有找到相关信息哦~~");
	    			 }
				}
		});
	});
	
	//模糊查询后的换页
	function to_page2(pn){
		var condition = $(".search2-txt").val();
	  	   $.ajax({
	   		  url:"${APP_PATH}/searchCommentWithAll",
	   		  data:"pn="+pn+"&condition="+condition,
	   		  type:"GET",
	   		  success:function(result){
	   				if(result.code==100){    	 
			 			build_comments_table(result);
			 			build_page_info(result);
						build_page_nav(result,2)
    			 	}else{//验证失败
    			 		 $("#error-message").text("没有找到相关信息哦~~");
    			 	}
	   		  }
	   	  });
	 }


</script>
</body>
</html>